<template>
  <div class="loading">
    <div class="OrderManagement">
      <div class="searchBox">
        <div>
          <div class="searchBoxTitle">选择分区</div>
          <el-select v-model="value"
                     placeholder="请选择">
            <el-option v-for="item in options"
                       :key="item.length"
                       :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </div>
        <div class="newButton"
             @click="search()">搜索</div>
        <div class="newButton"
             @click="addData()">添加</div>
        <div class="newButton"
             @click="allBind()">全部绑定</div>
        <div class="newButton"
             @click="allUnBind()">全部解绑</div>
        <div class="newButton"
             @click="allDelete()">全部删除</div>
      </div>
      <div class="tableBox">
        <el-collapse accordion>
          <el-table v-loading="loading"
                    :data="dataFilter(tableData)"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
            <el-table-column type="selection"
                             width="55"></el-table-column>
            <el-table-column label="序号"
                             width="min-120">
              <template slot-scope="scope">{{(scope.$index + 1) + ((page - 1) * size)}}</template>
            </el-table-column>
            <el-table-column prop="orderId"
                             label="工程ID"
                             min-width="180"></el-table-column>
            <el-table-column prop="orderName"
                             label="工程名称"
                             width="180"></el-table-column>
            <el-table-column prop="orderPerson"
                             label="操作人"
                             width="180"></el-table-column>
            <el-table-column prop="orderServerState"
                             label="服务器状态"
                             width="180"></el-table-column>
            <el-table-column prop="orderData"
                             label="创建日期"
                             width="180"></el-table-column>
            <el-table-column prop="orderState"
                             label="工单状态"
                             width="180"></el-table-column>
            <el-table-column prop="orderExplain"
                             label="工单说明"
                             width="180">
              <template slot-scope="scope">
                <el-collapse-item :title="scope.row.orderExplainTitle"
                                  :name="(scope.$index + 1) + ((page - 1) * size)">
                  <div>{{scope.row.orderExplain}}</div>
                </el-collapse-item>
              </template>
            </el-table-column>
            <el-table-column label="操作"
                             width="200"
                             label-class-name="table_column_title"
                             class-name="table_column_list">
              <template slot-scope="scope">
                <div class="newButtonSmall"
                     @click="editData(scope)">编辑</div>
                <div class="newButtonSmall"
                     @click="deleteData(scope)">删除</div>
              </template>
            </el-table-column>
          </el-table>
          <!--分页-->
          <div class="page">
            <el-pagination background
                           @size-change="sizeChange"
                           @current-change="currentChange"
                           :current-page="page"
                           :page-sizes="sizes"
                           :page-size="size"
                           :layout="layout"
                           :total="tableData.length"></el-pagination>
          </div>
          <!--新增对话框-->
          <el-dialog title="工单编辑"
                     :visible.sync="dialogFormVisible"
                     :close-on-click-modal="false"
                     :show-close="false"
                     width="50%">
            <el-form ref="orderDataForm"
                     :model="orderForm">
              <el-row>
                <el-col :span="24">
                  <el-steps :active="orderForm.orderState"
                            finish-status="success">
                    <el-step title="待处理"></el-step>
                    <el-step title="查看"></el-step>
                    <el-step title="正在处理"></el-step>
                    <el-step title="处理完毕"></el-step>
                  </el-steps>
                  <el-form-item>
                    <el-table :data="orderForm.tableState">
                      <el-table-column prop="name"
                                       label="订单状态"
                                       width="300"></el-table-column>
                      <el-table-column prop="date"
                                       label="日期"
                                       width="300"></el-table-column>
                    </el-table>
                  </el-form-item>
                  <el-form-item label="工单状态"
                                prop="orderName"
                                style="margin-left:-47px;margin-top:50px">
                    <el-select v-model="orderForm.orderSelect"
                               placeholder="请选择">
                      <el-option v-for="item in options"
                                 :key="item.value"
                                 :label="item.label"
                                 :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item style="margin-top:50px">
                    <el-transfer :titles="['未审核', '审核']"
                                 v-model="TransferValue"
                                 :data="TransferData"></el-transfer>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div slot="footer"
                 class="dialog-footer"
                 align="center">
              <el-button type="primary"
                         @click="confirm()">修 改</el-button>
              <el-button @click="cancel()">取 消</el-button>
            </div>
          </el-dialog>
          <el-dialog title="新增工单"
                     :visible.sync="dialogFormVisible2"
                     :close-on-click-modal="false"
                     :show-close="false"
                     width="60%">
            <el-form ref="dataForm"
                     :model="form"
                     :rules="rules">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="工程名称"
                                prop="orderName">
                    <el-input v-model="form.orderName"
                              placeholder="请输入工程名称"></el-input>
                  </el-form-item>
                  <el-form-item label="服务器状态"
                                prop="orderServerState">
                    <el-input v-model="form.orderServerState"
                              placeholder="请输入服务器状态"></el-input>
                  </el-form-item>
                  <el-form-item label="工单状态"
                                prop="orderState">
                    <el-select v-model="value"
                               placeholder="请选择">
                      <el-option v-for="item in options"
                                 :key="item.value"
                                 :label="item.label"
                                 :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="操作人"
                                prop="orderPerson">
                    <el-input v-model="form.orderPerson"
                              placeholder="请输入操作人"></el-input>
                  </el-form-item>
                  <el-form-item label="创建日期"
                                prop="orderData">
                    <!-- <el-input placeholder="请输入创建日期"></el-input> -->
                    <el-date-picker v-model="form.orderData"
                                    type="datetime"
                                    placeholder="选择日期时间"></el-date-picker>
                  </el-form-item>
                  <el-form-item label="工单说明"
                                prop="orderExplain">
                    <el-input type="textarea"
                              :rows="3"
                              v-model="form.orderExplain"
                              placeholder="请输入工单说明"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div slot="footer"
                 class="dialog-footer"
                 align="center">
              <el-button type="primary"
                         @click="confirm2()">修 改</el-button>
              <el-button @click="cancel2()">取 消</el-button>
            </div>
          </el-dialog>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script>
import OrderData from '../../../assets/modelData/Order.json'
import * as sysTool from '../../../js/systemTool'
import * as cookie from '../../../js/cookie'
export default {
  name: 'OrderManagement',
  data () {
    return {
      TransferData: [], // 穿梭框
      TransferValue: [], // 穿梭框
      loading: true, // 等待效果
      dialogFormVisible: false, // 对话框关闭
      dialogFormVisible2: false, // 对话框2关闭
      sizes: [10, 20, 50], // 分页展示条数
      layout: 'total, sizes, prev, pager, next, jumper', // 分页选项
      page: 1, // 按翻页
      size: 10, // 每页几条
      multipleSelection: [], // 复选框
      allChicket: [], // 复选框
      ip: '1.1.1.1',
      area: '北京市',
      brower: 'chrome',
      os: 'windows7',
      form: {}, // 添加数据
      orderForm: {}, // 修改数据
      tableData: [], // 表格数据
      // 以上必备项结束，下面为不同页面数据
      rules: { // 表单验证
        orderName: [{ required: true, message: '请输入工程名称', trigger: 'blur' }],
        orderServerState: [{ required: true, message: '请输入服务器状态', trigger: 'blur' }],
        orderState: [{ required: true, message: '请输入工单状态', trigger: 'blur' }],
        orderPerson: [{ required: true, message: '请输入操作人', trigger: 'blur' }],
        orderData: [{ required: true, message: '请输入创建日期', trigger: 'blur' }],
        orderExplain: [{ required: true, message: '请输入工单说明', trigger: 'blur' }]
      },
      options: [{ // 下拉框
        value: '1',
        label: '待处理'
      }, {
        value: '2',
        label: '查看'
      }, {
        value: '3',
        label: '正在处理'
      }, {
        value: '4',
        label: '处理完毕'
      }],
      value: '' // 下拉框value
    }
  },
  mounted () {
    this.init()
    this.gData()
  },
  methods: {
    gData () {
      var data = [
        {
          key: 1,
          label: '审核状态1',
          disabled: false
        },
        {
          key: 2,
          label: '审核状态2',
          disabled: false
        },
        {
          key: 3,
          label: '审核状态3',
          disabled: false
        },
        {
          key: 4,
          label: '审核状态4',
          disabled: false
        }
      ]
      this.TransferData = data
      this.TransferValue = []
    },
    // 初始化获取数据
    init () {
      this.loading = true
      this.getTableList()
    },
    // 处理表格数据
    dataFilter (data) {
      return data.filter(
        (e, i) => i >= (this.page - 1) * this.size && i < this.page * this.size
      )
    },
    // 展示所有信息
    getTableList () {
      this.loading = true
      var mycars = OrderData.result

      let num = 1
      if (mycars != null) {
        for (const item of mycars) {
          item.num = num++
        }
        this.tableData = mycars
        for (var i = 0; i < mycars.length; i++) {
          this.tableData[i].orderExplainTitle = this.tableData[i].orderExplain.substring(0, 5) + '...'
        }
      }
      setTimeout(() => {
        this.loading = false
      }, 1.5 * 1000)
    },
    search () {
      this.getTableList()
    },
    // 复选框内容
    handleSelectionChange (val) {
      this.allChicket = []
      this.multipleSelection = val
      for (var i = 0; i < this.multipleSelection.length; i++) {
        this.allChicket.push(this.multipleSelection[i].Device_ID)
      }
    },
    // 添加数据
    addData () {
      this.changeIndex = -1
      this.form = {}
      this.orderDataTime = ''
      this.value = ''
      this.dialogFormVisible2 = true
      // 清空Validate校验
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 修改数据
    editData (scope) {
      this.changeIndex = scope.$index
      this.orderForm = JSON.parse(JSON.stringify(scope.row))
      if (this.orderForm.orderState === 1) {
        this.orderForm.orderSelect = '待处理'
      }
      if (this.orderForm.orderState === 2) {
        this.orderForm.orderSelect = '查看'
      }
      if (this.orderForm.orderState === 3) {
        this.orderForm.orderSelect = '正在处理'
      }
      if (this.orderForm.orderState === 4) {
        this.orderForm.orderSelect = '处理完毕'
      }
      this.dialogFormVisible = true
      // 清空Validate校验
      this.$nextTick(() => {
        this.$refs['orderDataForm'].clearValidate()
      })
    },
    // 点击修改按钮
    confirm () {
      // 判断是否有input为空
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          var origionData = this.tableData[this.changeIndex]
          var changeData
          if (origionData) {
            console.log('修改')
            changeData = this.form
            // 判断每一项是否修改
            let changed = false
            for (let i in changeData) {
              if (changeData[i] !== origionData[i]) {
                changed = true
              }
            }
            if (changed) {
              this.$confirm('确定提交修改吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              })
                .then(res => {
                  // 注册按钮等待效果初始化
                  const loading = this.$loading({
                    lock: true,
                    text: '更改成功，请稍后...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                  })
                  setTimeout(() => {
                    this.dialogFormVisible = false
                    this.getTableList()
                    loading.close()
                    this.$message({
                      message: '修改成功',
                      type: 'success'
                    })
                  }, 1000)
                })
                .catch(res => {
                  this.$message(`取消修改`)
                })
            } else {
              this.$message(`没有任何改动`)
            }
          } else {
            console.log('新增')
            this.$confirm('确定添加数据吗？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
              .then(res => {
                // 注册按钮等待效果初始化
                const loading = this.$loading({
                  lock: true,
                  text: '更改成功，请稍后...',
                  spinner: 'el-icon-loading',
                  background: 'rgba(0, 0, 0, 0.7)'
                })
                setTimeout(() => {
                  this.dialogFormVisible = false
                  this.getTableList()
                  loading.close()
                  this.$message({
                    message: '添加成功',
                    type: 'success'
                  })
                }, 1000)
              })
              .catch(res => {
                this.$message(`取消添加`)
              })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 点击修改按钮
    confirm2 () {
      this.dialogFormVisible2 = false
    },
    // 取消修改
    cancel () {
      this.form = {}
      this.dialogFormVisible = false
    },
    // 取消修改2
    cancel2 () {
      this.form = {}
      this.dialogFormVisible2 = false
    },
    // 删除数据
    deleteData (scoped) {
      this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(res => {
          var brower = sysTool.GetCurrentBrowser()
          var os = sysTool.GetOs()
          var username = cookie.getCookie('userAccountNumber')
          var password = cookie.getCookie('userAccountPassword')
          var data = {
            Method: 'RemoveMemberWeb',
            Name: username,
            Password: password,
            Data: [scoped.row.Name],
            Device_ID: os,
            Platform: brower
          }
          var msg = JSON.stringify(data)
          var data2 = new FormData()
          data2.append('content', msg)
          let url = 'api/member/reg_member.php'
          this.axios.post(url, data2).then((res) => {
            var resl = res.data
            if (resl.Result === 'OK') {
              this.$message({
                message: res.data.Message,
                type: 'success'
              })
              this.init()
            } else {
              this.$message({
                message: res.data.Message,
                type: 'error'
              })
            }
          })
        })
        .catch(res => {
          this.$message(`取消修改`)
        })
    },
    // 全部删除
    allDelete () {
    },
    // 全部绑定
    allBind () {
    },
    // 全部解绑
    allUnBind () {
    },
    // 解除绑定
    bindData (scoped) {
    },
    // 冻结解冻
    prohibitData (scoped) {
    },
    // 每页显示条数修改
    sizeChange (size) {
      this.size = size
    },
    // 切换分页
    currentChange (page) {
      this.page = page
    }
  }
}
</script>
<style scoped>
.OrderManagement {
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
}
.title {
  margin-bottom: 30px;
}
.userInfo {
  position: relative;
  width: 550px;
  padding: 35px;
}
</style>
<style>
.el-collapse {
  border: 0px solid #ebeef5;
}
.el-table td div {
  background-color: #ffffff00;
}
</style>
